Summary

This PR adds two features for better Tailwind CSS v4 compatibility in React Native:

1. Tailwind CSS v4 shadow variable defaults
2. Inset shadow parsing support

Problem

Tailwind CSS v4 Shadow Variables

Tailwind CSS v4 uses @property to define initial-value for shadow CSS variables:

@property --tw-shadow {
  syntax: "*";
  initial-value: 0 0 #0000;
  inherits: false;
}

Since react-native-css doesn't support @property declarations, these variables are undefined when shadow utilities are used, causing runtime errors.

Inset Shadows Not Supported

CSS inset shadows like box-shadow: inset 0 0 24px 0 #fff were not being parsed because there was no pattern matching for the inset keyword.

Solution

1. Root Variable Defaults

Added default values for Tailwind v4 shadow variables in src/native-internal/root.ts:

• --tw-shadow
• --tw-shadow-color
• --tw-inset-shadow
• --tw-inset-shadow-color
• --tw-ring-shadow
• --tw-inset-ring-shadow
• --tw-ring-offset-shadow

These are set to transparent shadow values that get filtered out by omitTransparentShadows.

2. Inset Shadow Parsing

Added pattern matching for inset shadows in src/native/styles/shorthands/box-shadow.ts:

// Patterns added:
[inset, offsetX, offsetY, blurRadius, spreadDistance]
[inset, offsetX, offsetY, blurRadius, spreadDistance, color]
[inset, color, offsetX, offsetY, blurRadius, spreadDistance]

The normalizeInsetValue function converts inset: "inset" to inset: true as expected by React Native's boxShadow prop.

Testing

Added 5 new tests covering:

• Basic inset shadow
• Inset shadow with color first
• Inset shadow inheriting default color
• Mixed inset and regular shadows
• Tailwind v4 shadow variables

All existing tests continue to pass.

Related

• Tailwind CSS v4 @property discussion
• NativeWind boxShadow support